<template lang="html">
  <section class="wrapper">
    <div class="heart">❤</div>
    <div class="text">
      <p>T</p>
      <p>H</p>
      <p>A</p>
      <p>N</p>
      <p>K</p>
      <p>&nbsp;</p>
      <p>Y</p>
      <p>O</p>
      <p>U</p>
    </div>
  </section>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  @import url('https://fonts.googleapis.com/css?family=Comfortaa:700|Roboto:900|Russo+One');
  .wrapper {
    background: #f9a;
    text-align: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .heart {
    color: #fff;
    position: fixed;
    animation: heart 5s linear infinite;
    margin-left: -20px;
  }
  @function makelongshadow($color) {
    $val: 0px 0px $color;
    @for $i from 1 through 300 {
      $val: #{$val}, #{$i}px #{$i}px #{$color};
    }
    @return $val;
  }

  $color: #aeb;

  .text {
    margin-left: -20px;
  }
  p {
    margin-top: 55vh;
    width: 45px;
    display: inline-block;
    font-size: 0px;
    font-family: 'Russo One';
    font-weight: 900;
    color: #fff;
  }

  @for $i from 1 to 10 {
    p:nth-child(#{$i}) {
      text-shadow: makelongshadow(adjust-hue($color, $i * 30));
      animation: showup 5s infinite $i * 0.20s;
    }
  }

  @keyframes showup {
    0% {
      font-size:0px;
      transform:rotate(90deg);
    }
    5% {
      font-size:60px;

    }
    10% {
      font-size:66px;
      transform:rotate(0deg);
    }
    60% {
      font-size:66px;
      opacity: 1;
    }
    71% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      font-size:66px;
      transform:rotate(0deg);
    }
  }

  @keyframes heart {
    0% { opacity: 0; }
    30% { left: 50vw; top: 40vh; opacity: 0; font-size: 42px; }
    40% { left: 50vw; top: 40vh; opacity: 1; font-size: 42px; }
    70% { left: 50vw; top: 40vh; opacity: 1; font-size: 42px; }
    80% { left: 50vw; top: 37vh; opacity: 0; font-size: 30px; }
    100% { opacity: 0; }
  }
</style>
